<template>
	<el-tabs size="small">
		<el-tab-pane label="系统">
			<YdTable
				:formData="sysFormData"
				:tableConfig="sysTableConfig"
				:tableData="sysTableData.data"
				@sizeChangeHandler="handlerSysQuery"
				@currentChangeHandler="handlerSysQuery"
				@sortChangeHandler="handlerSysQuery"
			>
			</YdTable>
		</el-tab-pane>
		<el-tab-pane label="网端">
			<YdTable
				:formData="segFormData"
				:tableConfig="segTableConfig"
				:tableData="segTableData.data"
				@sizeChangeHandler="handlerSegQuery"
				@currentChangeHandler="handlerSegQuery"
				@sortChangeHandler="handlerSegQuery"
			>
			</YdTable>
		</el-tab-pane>
	</el-tabs>
</template>

<script setup name="SysBusiStepSegRelation" lang="ts">
import { querySysBusiRelationByResourceCode, querySegmentRelationByResourceCode } from '@/api/admin/businessSourceManage/businessSourceManage';
import { ref, reactive, watch } from 'vue';

const props = defineProps({
	resourceCode: String,
});

let sysFormData = reactive({
	pageSize: 10,
	pageNum: 1,
});
let sysTableConfig = reactive<TableConfigType>({
	columns: [
		{
			label: '系统名称',
			prop: 'systemName',
		},
		{
			label: '业务名称',
			prop: 'businessName',
		},
		{
			label: '步骤名称',
			prop: 'stepName',
		},
	],
	// 开启分页
	pagination: {
		pageNum: 1,
	},
	// 加载层
	loading: false,
});
let sysTableData = reactive({
	data: [],
});
let segFormData = reactive<FormModelType>({
	pageSize: 10,
	pageNum: 1,
});
let segTableConfig = reactive<TableConfigType>({
	columns: [
		{
			label: '系统名称',
			prop: 'systemName',
		},
		{
			label: '端类型',
			prop: 'segmentTypeName',
		},
		{
			label: '网端名称',
			prop: 'segmentName',
		},
	],
	// 开启分页
	pagination: {
		pageNum: 1,
	},
	// 加载层
	loading: false,
});
let segTableData = reactive({
	data: [],
});

watch(
	props,
	(newVal) => {
		if (newVal.resourceCode && newVal.resourceCode !== '') {
			handlerSysQuery();
			handlerSegQuery();
		} else {
			// 清空数据
			sysTableData.data = [];
			sysTableConfig.pagination!.total = 0;
			segTableData.data = [];
			segTableConfig.pagination!.total = 0;
		}
	},
	{ deep: true, immediate: true }
);

function handlerSysQuery() {
	if (!props.resourceCode || props.resourceCode === '') {
		return;
	}
	sysTableConfig.loading = true;
	querySysBusiRelationByResourceCode({
		...sysFormData,
		resourceCode: props.resourceCode,
	}).then((res: ApiResponse) => {
		sysTableConfig.loading = false;
		sysTableData.data = res.data.records;
		sysTableConfig.pagination!.total = res.data.total;
	});
}
function handlerSegQuery() {
	if (!props.resourceCode || props.resourceCode === '') {
		return;
	}
	segTableConfig.loading = true;
	querySegmentRelationByResourceCode({
		...segFormData,
		resourceCode: props.resourceCode,
	}).then((res: ApiResponse) => {
		segTableConfig.loading = false;
		segTableData.data = res.data.records;
		segTableConfig.pagination!.total = res.data.total;
	});
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped></style>
